<template>
    <!-- Header区域 -->
    <div>
        <div class="header">
            <p class="title">todos</p>
            <input class="new-todo" type="text" v-model.trim.lazy="todo"
            placeholder="What needs to bedone?" @keyup.enter="toAdd"/>
        </div>
    </div>
</template>
<script setup>
import { ref } from 'vue'
const todo = ref('')
// 声明自定义事件
const emit = defineEmits(['addEvent'])
const toAdd = () => {
    // 把todo这个数据发送给父组件去添加到数组
    if(todo.value) {
        // 触发自定义事件
        emit('addEvent', todo.value)
    }
    // 清空输入框
    todo.value = ''
}
</script>
<style scoped>
/* Header区域样式 */
.header {
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
}

.title {
    margin: 0;
    font-size: 36px;
    font-weight: 400;
    text-align: center;
    color: #b83f45;
}

.new-todo {
    width: 93%;
    padding: 20px 10px 20px 50px;
    height: 20px;
    border: none;
    background: rgba(0, 0, 0, 0.003);
    box-shadow: inset 0 2px 1px rgba(0, 0, 0, 0.05);
    outline: none;
}
</style>